<template>

      <div class="location-bar fx-row fx-row-center fx-row-space-between">
          <span class="location-bar-title">{{message}}</span>
          <span class="circle-must-bg">
            <!--:class="{'location-animation' : isLoading}"-->
            <span class="ib pos-rel tran-center">
                  <i  :class="{'location-animation' : isLoading}"  class="block text-primary iconfont icon-position"></i>
              </span>
          </span>
      </div>

</template>
<style lang="scss" scoped>
  @import "../../../common/skin/var";

   //位置bar
  .location-bar{
    text-align: center;
    background-color: $primary-color;

    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    height: 30px;


    .location-bar-title{
      font-size: 12px;
      color: #fff;
      padding: 8px 10px;
    }
  }
  .circle-must-bg{
    width: 19px;
    height: 19px;
    text-align: center;
    display: inline-block;
    background: #fff;
    position: relative;
    border-radius: 50%;
    margin-right: 5px;

    .icon-position{
      font-size: 12px;
    }
  }

</style>
<script>
    export default{
        props : ['isLoading','message'],
        data(){
            return{
            }
        },
        components:{

        }
    }
</script>
